
html, boby {
    width: 100%;
    height: 100%;
    padding: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F80%2F8b%2F4f%2F808b4f44d2fba5e066020485a24e333c.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?");
}

#app {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
}


.z-main {
    width: 840px;
    height: 800px;
    display: flex;
    justify-content: flex-start;
    /* border: 1px solid red; */
}



/* ------------------------------------- */
.z-nav-left {
    width: 160px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

.z-nav-left-box {
    width: 160px;
    height: 160px;
    background-color: #00000010;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    border: 1px solid #00000030;
}

.z-nav-left-box-selected {
    width: 160px;
    height: 160px;
    background-color: #409EFF;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    border: 1px solid #00000030;

}


.z-nav-left-box:hover {
    background-color: #409EFF;
    opacity: 1.0;
  

}
.z-nav-left-box-selected > .z-nav-left-box-icon {
    margin-bottom: -20px;
    transition-delay: 30s;
}

.z-nav-left-box-selected > .z-nav-left-box-text {
    margin-top: -20px;
    transform:  all .1s ease-in;
}

.z-nav-left-box:hover > .z-nav-left-box-icon {
    margin-bottom: -20px;
    transform:  all .1s ease-in;
}

.z-nav-left-box:hover > .z-nav-left-box-text {
        margin-top: -20px;
        transform:  all .1s ease-in;
}


.z-nav-left-box-icon {
    width: 25px;
    height: 25px;
    opacity: 1.0;
}

.z-nav-left-box-text {
    font-size: 15px;
    color: #fff;
    opacity: 1.0;
}



/* ----------------------------------- */
.z-content {
    width: 680px;
    height: 800px;
}

.z-content-home {
    background-color: #00000025;
    /*background-repeat: no-repeat;
    background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F87%2F59%2F4457d26aefcf9eb.jpg%21r650%2Ffw%2F800&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641905812&t=540b7f6ac0f71f784ea8908719242131");
    position: relative; */
    /* background-color: rgb(22, 21, 21); */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
.z-content-home-name {
    height: 200px;
    width: 500px;
    font-size: 70px;
    margin-top: 200px;
    color: rgb(255, 255, 255);
    font-family: 'KaiTi', "KaiTi_GB2312", "STKaiti";
    /* background-color: #409EFF; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.z-content-home-name:hover {
    color: #ffffff90;
}
.z-content-home-date {
    height: 100px;
    width: 680px;
    font-size: 20px;
    color: rgb(255, 255, 255);
    font-family: 'Courier New', Courier, monospace;
    /* background-color: #409EFF; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.z-content-home-date:hover {
    color: #ffffff90;
}

.z-content-abo {
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
.z-content-abo-g1 {
    /* background-color: red; */
    width: 680px;
    height: 300px;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
}
.z-content-t1 {
    width: 680px;
    height: 100px;
    /* background-color: #4d99ee; */
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.z-content-t2 {
    width: 680px;
    height: 150px;
    /* background-color: #65c47a; */
    font-size: 13px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
    color:#00000050;
    padding: 10px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.z-content-abo-g2{
    width: 680px;
    height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #00000005;
}
.z-content-abo-g2-group{
    height: 200px;
    width: 680px;
    /* border: 2px solid red; */
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.z-content-abo-g2-group-r{
    width: 680px;
    height: 100px;
    display: flex;
    justify-content: space-around;
    /* background-color: #4ecb56; */
}
.z-content-abo-g2-group-m{
    height: 100px;
    width: 150px;
    /* border: 1px solid #000; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    margin: 30rpx;
}
.z-content-t3{
    font-size: 16px;
}
.z-content-t4{
    font-size: 13px;
}

.z-content-abo-g3{
    background-image: url("https://img0.baidu.com/it/u=3934460539,416845970&fm=26&fmt=auto");
    width: 680px;
    height: 200px;
    background-color: #4ecb56;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}
.z-content-t5{
    font-size: 16px;
    color: #fff;
    padding: 10px;
}
.z-content-t6{
    font-size: 13px;
    color: #00000080;
    margin-bottom: 20px;
}
.z-content-t7{
    width: 680px;
    height: 100px;
    /* background-color: #4d99ee; */
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4d99ee;
}

.z-content-abo-g4{
    width: 680px;
    height: 400px;
    background-color: #ffffff;
}





.z-content-sch {
    background-color: #4ecb56;
 }
.z-content-honor {
    background-color: #93dcc2;
}
.z-content-motto {
    background-color: #4d99ee;
}
.el-scrollbar__wrap{
    overflow-x: hidden;
  }